<template>
	<view class="bt-block subject-wrap">
		<view class="subject-title">
			<text>【第{{index}}题】</text>
			{{item.questionTitle}}
		</view>
		<view>
			<view class="item-wrap" v-if="item.questionType==1">
				<view v-for="i,idx in qItems" :key="idx" class="subject-item" :class="getClass(idx)">
					<view class="flex-1 title">{{idx+1}}. {{i}}</view>
					<view class="img">
						<!-- <u--image v-if="getClass(idx+1)=='success'" height="42rpx" width="42rpx" src="/static/images/ui/edu/right.png"></u--image> -->
						<!-- <u--image v-if="getClass(idx+1)=='fail'" height="42rpx" width="42rpx" src="/static/images/ui/edu/wrong.png"></u--image> -->
					</view>
				</view>
			</view>
			<view class="item-wrap" v-if="item.questionType==2">
				<view v-for="i,idx in qItems" :key="idx" class="subject-item" :class="getMutilClass(idx)">{{idx+1}}. {{i}}</view>
			</view>
			<view class="item-wrap" v-if="item.questionType==3">
				<view  :class='["subject-item", getOtherClass(true)]'>正确</view>
				<view :class='["subject-item", getOtherClass(false)]'>错误</view>
			</view>
			<view class="flex justify-between px-2">
				<view>答案：{{showAnswer(item.userAnswerItem)}}</view>
				<view>正确答案：{{showAnswer(item.answerItem)}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:["index", "item"],
		computed:{
			qItems(){
				if(this.item && this.item.questionItem){
					return JSON.parse(this.item.questionItem)
				} else {
					return []
				}
			}
		},
		methods:{
			getClass(idx){
				// if(this.item.isCorrect=='0'){
				// 	if(this.item.userAnswerItem==idx){
				// 		return "fail"
				// 	}
				// }
				if(this.item.userAnswerItem==idx){
					return "success"
				}
				
			},
			getMutilClass(idx){
				if(this.item.userAnswerItem.includes(String(idx))){
					return "success"
				}
				
			},
			getOtherClass(b){
				let answer = ''
				
				try{
					answer = JSON.parse(this.item.userAnswerItem)
				}catch(err){
					answer = 10086
				}
				
				if(answer==b){
					return "success"
				}
			},
			showAnswer(answer){
				//todo 未来如果改成ABC
				if(this.item.questionType==1){
					if(answer === ''){
						return ''
					} else {
						return Number(answer)+1
					}
					
				}
				if(this.item.questionType==2){
					let _answer = JSON.parse(answer)
					return _answer.map(a=>Number(a+1))
				}
				if(this.item.questionType==3){
					return answer=='true'?"正确":answer=='false'?"错误":''
				}
			}
		}
	}
</script>

<style scoped>
	.subject-wrap{
		padding: 30rpx 24rpx;
		margin:24rpx 0;
	}
	.subject-title {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #1d2129;
		line-height: 44rpx;;
	}
	.subject-item {
		background: #fafafa;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #86898c;
		line-height: 48rpx;
		padding: 30rpx;
		margin: 24rpx 0;
	}
	.success {
		color: #06bf5c;
		background: #e8f9ee;
	}
	.fail {
		color: #ee3636;
	}
	.title {
		max-width: 90%;
	}
</style>